<template>
	<view>
		<view class="waterfall-box h-flex-x h-flex-2" v-if="showList">
			<view>
				<view v-for="(item,index) in leftList" :key="item._render_id" class="list-item"
					:class="{'show': showPage > item._current_page }">
					<!-- <helang-waterfall-item :item="item" tag="left" :index="index" @height="onHeight"
						@click="onClick"></helang-waterfall-item> -->

					<view class="waterfall-item" @tap="onTap">
						<image class="item-image" v-if="item.cover_url" :src="item.cover_url" mode="widthFix"></image>
						<image v-else class="no-image-view-waterfall-item" src="@/static/zanwutupian.png"
							mode="widthFix"></image>
						<view class="item-text-view-box">
							<view class="waterfall-item-title" v-if="item.model_has_one">{{item.model_has_one.name}}
							</view>
							<view class="item-content-box">
								<view class="item-content-text">
									{{item.registration_time.split('-')[0]}}-{{item.registration_time.split('-')[1]}}
								</view>
								<view class="shu-line"></view>
								<view class="item-content-text" v-if="item.standard_has_one">
									{{item.standard_has_one.name}}
								</view>
								<view class="shu-line"></view>
								<view class="item-content-text">{{item.mileage}}</view>
								<view class="shu-line" v-if="item.province_has_one"></view>
								<view class="item-content-text" v-if="item.province_has_one">
									{{item.province_has_one.name}}
								</view>
							</view>
							<view class="item-price-box">
								<view class="item-content-box">
									<view class="item-text-price">{{item.price.split('万')[0]}}</view>
									<view class="item-text-wan">万</view>
								</view>
								<view class="item-content-text">{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view v-for="(item,index) in rightList" :key="item._render_id" class="list-item"
					:class="{'show': showPage > item._current_page }">
					<!-- <helang-waterfall-item :item="item" @height="onHeight" @click="onClick" tag="right"
						:index="index"></helang-waterfall-item> -->
					<view class="waterfall-item" @tap="onTap">
						<image class="item-image" v-if="item.cover_url" :src="item.cover_url" mode="widthFix"></image>
						<image v-else class="no-image-view-waterfall-item" src="@/static/zanwutupian.png"
							mode="widthFix"></image>
						<view class="item-text-view-box">
							<view class="waterfall-item-title" v-if="item.model_has_one">{{item.model_has_one.name}}
							</view>
							<view class="item-content-box">
								<view class="item-content-text">
									{{item.registration_time.split('-')[0]}}-{{item.registration_time.split('-')[1]}}
								</view>
								<view class="shu-line"></view>
								<view class="item-content-text" v-if="item.standard_has_one">
									{{item.standard_has_one.name}}
								</view>
								<view class="shu-line"></view>
								<view class="item-content-text">{{item.mileage}}</view>
								<view class="shu-line" v-if="item.province_has_one"></view>
								<view class="item-content-text" v-if="item.province_has_one">
									{{item.province_has_one.name}}
								</view>
							</view>
							<view class="item-price-box">
								<view class="item-content-box">
									<view class="item-text-price">{{item.price.split('万')[0]}}</view>
									<view class="item-text-wan">万</view>
								</view>
								<view class="item-content-text">{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="whouse-box">
				<view v-for="(item,index) in list" :key="index">
					<view class="waterfall-item" @tap="onTap(item,index)">
						<image class="item-image" v-if="item.cover_url" :src="item.cover_url" mode="widthFix"></image>
						<image v-else class="no-image-view-waterfall-item" src="@/static/zanwutupian.png"
							mode="widthFix"></image>
						<view class="item-text-view-box">
							<view class="waterfall-item-title" v-if="item.model_has_one">{{item.model_has_one.name}}
							</view>
							<view class="item-content-box">
								<view class="item-content-text">
									{{item.registration_time.split('-')[0]}}-{{item.registration_time.split('-')[1]}}
								</view>
								<view class="shu-line"></view>
								<view class="item-content-text" v-if="item.standard_has_one">
									{{item.standard_has_one.name}}
								</view>
								<view class="shu-line"></view>
								<view class="item-content-text">{{item.mileage}}</view>
								<view class="shu-line" v-if="item.province_has_one"></view>
								<view class="item-content-text" v-if="item.province_has_one">
									{{item.province_has_one.name}}
								</view>
							</view>
							<view class="item-price-box">
								<view class="item-content-box">
									<view class="item-text-price">{{item.price.split('万')[0]}}</view>
									<view class="item-text-wan">万</view>
								</view>
								<view class="item-content-text">{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
 -->

		</view>

		<slot name="default"></slot>
	</view>
</template>

<script>
	import helangWaterfallItem from "@/components/Waterfall/waterfall-item.vue"

	export default {
		name: "helangWaterfallList",
		options: {
			virtualHost: true
		},
		components: {
			"helang-waterfall-item": helangWaterfallItem
		},
		props: {
			// 组件状态
			status: {
				type: String,
				default: ''
			},
			// 待渲染的数据
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 重置列表，设置为 true 时，瀑布流会自动重新渲染列表
			reset: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			"$props.status"(newValue, oldValue) {
				// 状态变更为 加载成功 时，执行瀑布流数据渲染	
				if (newValue == 'success') {
					this.startRender();
				} else if (!this.showList) {
					this.resetData();
				}
			},
			"$props.list"(newValue, oldValue) {

				// 状态变更为 加载成功 时，执行瀑布流数据渲染	
				if (this.list.length > 0) {
					this.awaitRenderList = this.list
					this.$utils.log("打印拿到的数据集合  " + JSON.stringify(this.awaitRenderList))
					this.showList = false
					var that = this
					this.$nextTick(() => {
						for (var i = 0; i < that.awaitRenderList.length; i++) {
							if (i % 2 == 0) {
								that.leftList.push(that.awaitRenderList[i])
								that.$utils.log("打印右侧数据的长度 leftList  " + JSON.stringify(that.leftList.length))
							} else {
								that.rightList.push(that.awaitRenderList[i])
								that.$utils.log("打印左侧数据的长度 rightList  " + JSON.stringify(that.rightList.length))
							}
						}
						that.showList = true
						that.$forceUpdate()
					})

				}
			}
		},
		computed: {
			// showList() {
			// 	return !["fail", "empty"].includes(this.$props.status);
			// }
		},
		data() {
			return {
				// 左侧列表高度
				leftHeight: 0,
				// 右侧列表高度
				rightHeight: 0,
				// 左侧列表数据
				leftList: [],
				// 右侧列表数据
				rightList: [],
				// 待渲染列表
				awaitRenderList: [],
				// 当前展示页码数据
				showPage: 1,
				showList: true
			}
		},
		mounted() {

			if (this.$props.status == 'success') {
				this.startRender();
			}

		},
		methods: {
			onTap(item, index) {
				this.$emit("click", item, index, '');
			},
			// 监听高度变化
			onHeight(height, tag) {
				/**
				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
				 * */
				let marginBottom = uni.upx2px(20);

				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)

				if (tag == 'left') {
					this.leftHeight += (height + marginBottom);
				} else {
					this.rightHeight += (height + marginBottom);
				}
				this.renderList();
			},
			// 组件点击事件
			onClick(index, tag) {
				// 对应的数据
				if (tag == 'left') {
					this.$emit("click", this.leftList[index], index);
				} else {
					this.$emit("click", this.rightList[index], index);
				}
			},
			// 渲染列表，这里实现瀑布流的左右分栏
			renderList() {
				// 待渲染长度为 0 时表示已渲染完成
				if (this.awaitRenderList.length < 1) {
					this.showPage++;
					this.$emit("done");

					// 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
					if (this.leftHeight > 100000000) {
						if (this.leftHeight > this.rightHeight) {
							this.leftHeight = 2;
							this.rightHeight = 1;
						} else {
							this.leftHeight = 1;
							this.rightHeight = 2;
						}
					}
					return;
				}
				let item = {
					...this.awaitRenderList.splice(0, 1)[0],
					// 当前数据添加当前页面标识
					_current_page: this.showPage,
					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
					_render_id: new Date().getTime()
				};


			},
			// 重置数据
			resetData() {
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.leftList = [];
				this.rightList = [];
				this.awaitRenderList = [];
				// 当前展示页码数据
				this.showPage = 1;
			},
			// 启动渲染
			startRender() {
				if (!this.showList) {
					this.resetData();
					return;
				}

				if (!this.$props.list || this.$props.list.length < 1) {
					return;
				}

				// 若本次渲染为 重置 则先恢复组件的默认参数
				if (this.$props.reset) {
					this.resetData();
				}

				this.awaitRenderList = [...this.$props.list];
				this.renderList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-box {
		padding: 0rpx 13rpx 0rpx 13rpx;
		box-sizing: border-box;

		>view {
			padding: 0rpx 10rpx;
		}

		.list-item {
			margin-bottom: 0;
			// 设置透明，默认是可视的
			opacity: 0;
			// 默认超出隐藏，不影响加载中的文字显示效果
			overflow: hidden;
			height: 0;

			&.show {
				margin-bottom: 5rpx;
				opacity: 1;
				overflow: auto;
				height: auto;
			}
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}




	.whouse-box {
		width: 94%;
		margin: 30rpx auto 0;
		column-count: 2;
		column-gap: 20rpx;

	}

	.waterfall-item {
		padding: 0rpx 12rpx 12rpx 12rpx;
		background-color: #fff;
		border-radius: 10px;
		font-size: 28rpx;
		color: #666;
		-webkit-column-break-inside: avoid;

		image {
			display: block;
			width: 100%;
			// 默认设置一个图片的大约值
			height: 350rpx;
		}
	}

	.shu-line {
		width: 0rpx;
		height: 16rpx;
		border: 1px solid #E3E3E3;
		opacity: 1;
		margin: 5rpx 0rpx;
	}

	.item-image {
		width: 100%;

		border-radius: 10rpx;
		background: #F2F2F2;
		opacity: 1;
		margin: 16rpx 0rpx;
	}

	.no-image-view-waterfall-item {
		width: 106rpx;
		height: 112rpx;
		border-radius: 10rpx;
		background: #F2F2F2;
		opacity: 1;
		margin: 16rpx 0rpx;
	}

	.item-view-box {}

	.waterfall-item-title {
		flex: 1;
		text-align: left;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #000026;
		margin-top: 8rpx;
	}

	.item-content-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.item-content-text {
		font-size: 22rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #AAAAAA;
		opacity: 1;
	}


	.item-price-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0rpx;
	}

	.item-text-price {
		font-size: 28rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		line-height: 0rpx;
		color: #EC4B4B;
		opacity: 1;
	}

	.item-text-wan {
		font-size: 20rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		line-height: 0rpx;
		color: #EC4B4B;
		opacity: 1;
	}
</style>